iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0
Data Technology

讓你資料美美的(d3.js+vue.js)系列 第 24

D3這邊可以再多一點互動嗎?

  • 分享至 

  • xImage
  •  

這次要再增強一點互動性

drag

有時候就是會想要把東西拉來拉去啦!
在d3中,如果想要拖拉物件可以使用drag來達成
drag分為三個事件(階段)

  • start 滑鼠點擊物件時
  • drag 拖拉物件時
  • end 放開物件時
    在這邊一樣要使用on來監聽這些事件,這次分別定義三個function來控制三個事件

start
在drag中,一樣可以透過匿名函式跟動畫等等,來製作豐富的效果

function dragstarted(d) {
  d3.select(this).select("text")
	.transition()
	.duration(60)
    .attr("x", d.x = d3.event.x)
    .attr("y", d.y = d3.event.y-linear(d)/2);
  d3.select(this).select("rect")
	.transition()
	.duration(60)
    .attr("x", d.x = d3.event.x-22)
    .attr("y", d.y = d3.event.y-linear(d)/2+5);
}

drag

function dragged(d) {
  d3.select(this).select("text")
    .attr("x", d.x = d3.event.x)
    .attr("y", d.y = d3.event.y-linear(d)/2);
  d3.select(this).select("rect")
    .attr("x", d.x = d3.event.x-22)
    .attr("y", d.y = d3.event.y-linear(d)/2+5);
}

end
之所以會用index來記錄i是因為,select(this)的物件只有一個,所以裡面的i都會是0,而不是原本取得的i值,所以先記錄到index來在後面可以使用,讓長條圖在拖拉結束後可以回到原本的位置

function dragended(d,i) {
	var index = i
	d3.select(this).select("text")
	.transition()
	.duration(600)
	.attr("y",function(d){
		return 500-linear(d)-5;
	})
	.attr("x",function(d,i){ //因為這邊的部分是在select(this)之下,所以資料量只有1,所以i=0
		 return xlinear(index)+27; //因此要在前面將正確的i記在index之中
	})
	d3.select(this).select("rect")
	.transition()
	.duration(600)
	.attr("x",function(d){
         return xlinear(index)+5;
    })
	.attr("y",function(d){
    	return 500-linear(d);
	})
}

最後在使用的時候要利用call來呼叫,on來監聽事件,並且要先利用d3.drag()來開啟拖拉的功能

var bar = chart.selectAll("g")
	.data(dataset)
	.enter().append("g")
	.call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))

Demo & code : https://codepen.io/FanWay/pen/PEaXWb


上一篇
D3來點互動吧
下一篇
D3圓餅圖
系列文
讓你資料美美的(d3.js+vue.js)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言